<!--
 * @Author: sundl
 * @Date: 2021-04-09 11:13:30
 * @project: 天津YQ平台
-->
<template>
  <el-row class="all-wrap">
    <div ref="scrollbar" class="all-wrap__scrollbar scroll-content" @scroll="onScroll">
      <!-- 基本信息-->
      <base-info class="scroll-item" @updateBaseInfo="updateBaseInfo" ref="baseInfo"></base-info>
      <!-- 领导批示 -->
      <leader-comment class="scroll-item"></leader-comment>
      <!-- 案事件人员信息列表 -->
      <PeopleInfoList class="scroll-item" />
      <!-- 涉及对象统计 -->
      <involve-obj-statistics class="scroll-item"></involve-obj-statistics>
      <!-- 呈报信息 -->
      <ReportInformation ref="reportInfo" class="scroll-item" v-if="isCbxx"/>
      <!-- 研判意见 -->
      <JudgeOpinions class="scroll-item" />
      <!-- 签收反馈情况 -->
      <SignFeedback class="scroll-item" />
      <!-- 关联专题 -->
      <relation-subject ref="relateSubject" class="scroll-item"></relation-subject>
      <!-- 动态信息评估 -->
      <dynamic-assess ref="dynamicAssess" class="scroll-item"></dynamic-assess>
      <!-- 关联信息 -->
      <relate-info ref="relateInfo" class="scroll-item"  :isCheckSelectAuth="false"
                   :columnData="glxxColumns" />
      <!-- 关联案事件人员信息列表 -->
      <ReleateEventInfoList class="scroll-item" />
      <!-- 值班信息 -->
      <DutyInformation ref="dutyInfo" class="scroll-item" />
    </div>
    <!-- 右侧滚动导航 -->
    <ItemRouter ref="itemRouter" @titleClick="getPositionIndex($event)" />
  </el-row>
</template>

<script>
import ItemRouter from './ItemRouter';
import BaseInfo from '@/pages/ExterCommun/detail/baseinfo';
import PeopleInfoList from './PeopleInfoList';
import ReportInformation from './ReportInformation';
import JudgeOpinions from './JudgeOpinions';
import SignFeedback from './SignFeedback';
import RelateInfo from '../relate-info/index';
import ReleateEventInfoList from './ReleateEventInfoList';
import DutyInformation from './DutyInformation';
import RelationSubject from './relation-subject.vue';
import LeaderComment from './leader-comment.vue';
import DynamicAssess from '../dynamic-assess';
import InvolveObjStatistics from '@/pages/ExterCommun/detail/involve-obj-statistics';
import {BM_DEPT} from "@/common/codeDic";

export default {
  components: {
    ItemRouter,
    BaseInfo,
    PeopleInfoList,
    ReportInformation,
    JudgeOpinions,
    SignFeedback,
    RelateInfo,
    ReleateEventInfoList,
    DutyInformation,
    RelationSubject,
    LeaderComment,
    DynamicAssess,
    InvolveObjStatistics,
  },
  props:{
    // 情报线索信息（情报）--详情中不显示呈报信息
     isCbxx:{
       type:Boolean,
       default:true
     }  
  },
  data() {
    return {
      currentIndex: 0,
      glxxColumns: [
        { label: '序号', type: 'index', width: 70 },
        { label: '上报时间', prop: 'sendTime' },
        { label: '信息编号', prop: 'serialNo', width: 300},
        { label: '标题',
          prop: 'title',
          isLink: true, // 是否是链接
          openUrl: 'ImpDetail', // 打开路径
          width: 300},
        { label: '上报单位', prop: 'createOrgCode',code:BM_DEPT },

      ]
    };
  },
  computed: {
  },
  watch: {
    currentIndex: {
      handler(newVal) {
        this.onJump(newVal);
      }
    }
  },
  methods: {
    // 滚动触发按钮高亮
    onScroll(e) {
      let scrollItems = document.querySelectorAll('.scroll-item');
      for (let i = scrollItems.length - 1; i >= 0; i--) {
        // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
        let judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop;
        if (judge) {
          this.$refs.itemRouter.currentIndex = i;
          break;
        }
      }
    },
    // 点击切换锚点
    onJump(index) {
      let target = document.querySelector('.scroll-content');
      let scrollItems = document.querySelectorAll('.scroll-item');

      // 判断滚动条是否滚动到底部
      if (target.scrollHeight <= target.scrollTop + target.clientHeight) {
        this.$refs.itemRouter.currentIndex = 11;
      }
      let total = scrollItems[index].offsetTop - scrollItems[0].offsetTop; // 锚点元素距离其offsetParent(这里是body)顶部的距离(待滚动的距离)
      let distance = document.querySelector('.scroll-content').scrollTop; // 滚动条距离滚动区域顶部的距离

      // let distance = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset // 滚动条距离滚动区域顶部的距离(滚动区域为窗口)
      // 滚动动画实现, 使用setTimeout的递归实现平滑滚动，将距离细分为50小段，10ms滚动一次
      // 计算每一小段的距离
      let step = total / 50;
      if (total > distance) {
        smoothDown(document.querySelector('.scroll-content'));
      } else {
        let newTotal = distance - total;
        step = newTotal / 50;
        smoothUp(document.querySelector('.scroll-content'));
      }

      // 参数element为滚动区域
      function smoothDown(element) {
        if (distance < total) {
          distance += step;
          element.scrollTop = distance;
          setTimeout(smoothDown.bind(this, element), 10);
        } else {
          element.scrollTop = total;
        }
      }

      // 参数element为滚动区域
      function smoothUp(element) {
        if (distance > total) {
          distance -= step;
          element.scrollTop = distance;
          setTimeout(smoothUp.bind(this, element), 10);
        } else {
          element.scrollTop = total;
        }
      }
    },
    // 获取子组件PositionBar传来的index值
    getPositionIndex(data) {
      this.currentIndex = data.index;
    },
    updateBaseInfo(data) {
      this.$emit('updateBaseInfo', data);
      if (data.signInVO) {
        if(this.$refs.reportInfo){
           this.$refs.reportInfo.onUpdateInfo(data);
        }
        this.$refs.dynamicAssess.onUpdateInfo(data);
        this.$refs.dutyInfo.onUpdateInfo(data);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.all-wrap {
  padding-left: 2rem;
  // width: 87.5rem;
  width: calc(100% - 270px);
  max-width: 1400px;
  height: 75vh;
  box-sizing: content-box;
  background-color: #fff;

  &__scrollbar {
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    /deep/.el-scrollbar__view {
      padding-right: 30px;
    }
  }
}
</style>
